import { defineComponent, ref } from 'vue';
import ExportExcel from '@/main';
import {
  headerDisplay,
  headerConfig
} from './data';
import { ExportDataItem } from '@/main/types';

export default defineComponent({
  setup() {
    const exportData = ref<ExportDataItem[]>([]);
    // 传入 apiConfig 则apiConfig生效，获取的数据直接进行导出逻辑
    // 不传 apiConfig，点击按钮 触发getData回调，然后外部传值进去后再进行导出逻辑
    const apiConfig = {
      url: '/api/res-flowable/assistant/process/data/dashboard',
      method: 'get'
    }
    console.log(apiConfig);
    const buttonConfig = {
      text: '下载excel',
      type: 'primary',
      size: '',
      disabled: false,
      plain: false,
      icon: ''
    }
    const methods = {
      entryData() {
        exportData.value = Array.from({ length: 10000 }).map((_item, index) => {
          const arg = Array.from({ length: 21 }).map((_item1, index1) => {
            return ['arg' + index1, `arg-${index}-${index1}`]
          })
          const resultMap = {
            autoIndex: index,
            ...Object.fromEntries(arg)
          }
          return resultMap;
        })
      }
    }
    return () => (
      <div>
        <ExportExcel
          headerConfig={headerConfig}
          headerDisplay={headerDisplay}
          exportData={exportData.value}
          buttonConfig={buttonConfig}
          on-getData={methods.entryData}
        />
      </div>
    )
  }
})
